<template>
  <div>
    <a-Input
      v-model:value="data"
      @change="change"
      :defaultValue="defaultValue"
      :disabled="disabled"
      :maxlength="maxlength"
      :size="size"
      :allow-clear="true"
    >
      <template #suffix>
        <a-button
          type="link"
          @click="copyInputContent"
          class="copyBtn"
          v-if="data?.length > 0 && hasCopy"
          size="small"
        >
          <template #icon> <CopyOutlined /> </template
        ></a-button>
      </template>
    </a-Input>
  </div>
</template>
<script lang="ts">
  import { defineComponent, ref, h, reactive, watch } from 'vue';
  import { useClipboard, usePermission } from '@vueuse/core';
  const { text, isSupported, copy } = useClipboard();
  const permissionRead = usePermission('clipboard-read');
  const permissionWrite = usePermission('clipboard-write');
  import { useMessage } from '/@/hooks/web/useMessage';
  import { CopyOutlined } from '@ant-design/icons-vue';
  const { createMessage } = useMessage();

  export default defineComponent({
    name: 'qcInput',
    props: ['value', 'defaultValue', 'disabled', 'maxlength', 'size', 'hasCopy', 'allowClear'],
    emit: ['change'],
    components: { CopyOutlined },
    setup(props, { emit }) {
      const data = ref('');
      function copyInputContent() {
        copy(props.value);
        createMessage.success('复制成功');
      }
      function change(v) {
        emit('change', v);
        data.value = v.target.value;
      }
      watch(
        () => props.value,
        (newVal) => {
          data.value = newVal;
        },
      );
      return {
        copyInputContent,
        change,
        data,
      };
    },
  });
</script>
<style scoped></style>
